<template>
  <div class="order-append-confirm-modal">
    <modal-temp ref="modal" @confirm="confirm" modal-name="确认新增订单">
      <template #btn>
        <a-button type="primary" class="btn green-btn" :disabled="disabled">
          确认
        </a-button>
      </template>
      <template #content>
        <p>
          确认为 <span style="font-weight: bold"> {{clientName}} </span> 添加 <span style="color: darkblue"> {{po_list.length}} </span> 件订单吗？
        </p>
        <small style="color: green">至少需要填写 客户PO，客方货号，盒式，纸质，数量 中的一项才能被成功添加。</small>
        <p style="margin-top: 10px;">
          它们的用户PO为 <span style="display:flex; color: darkslategray; margin-left: 30px;" v-for="(item, index) in po_list" :key="`${item}${index}`">{{index+1}} - {{item}}</span>
        </p>
      </template>
    </modal-temp>
  </div>
</template>

<script>
import ModalTemp from './ModalTemp';
import {
  getNameById
} from '@/utils/commonFunc.js';

export default {
  name: "OrderAppendConfirmModal",
  props: {
    ans: Array,
    disabled: Boolean,
  },
  data() {
    return {
    };
  },
  computed: {
    /**
     * 返回本页面的 id，该 modal 的 id 通常为 orderAppend 页面的 clientId
    */
    clientId() {
      return this.$route.params.clientId;
    },
    /**
     * 通过id，返回 "clientId - name" 组合
     */
    clientName() {
      const clientId = this.clientId;
      const name = getNameById(this.$store.state.clientsCache, clientId);
      return `${name} - ${clientId}`;
    },
    po_list() {
      return this.ans.map((value) => value.po);
    }
  },
  mounted() {
  },
  watch: {

  },
  methods: {
    /**
     * 确认，如果order的数量大于0的话，否则将弹出提示。
     */
    confirm() {
      if (this.ans.length > 0) {
        this.$emit('confirm');
      }
      else {
        this.$notification['warning']({
          message: '新增订单',
          description:
            `你没有输入任何1张有效的订单。
            只有 规格、备注、金额、单价 的订单是不会被计算的`,
        });
      }
    }
      
  },
  components: {
    ModalTemp
  },
};
</script>

<style scoped lang="scss">
.order-append-confirm-modal {

}
</style>
